﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>参数管理</title>

    <link href="../css/site.css" rel="stylesheet" />
    <style type="text/css">
        .divContent {
            width: 100%;
            height: 100%;
            /*margin-left: auto;
            margin-right:auto;*/
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            /*background-color:red;*/
        }

        .paraEditShade {
            background-color: gray;
            opacity: 0.5;
            visibility: hidden;
        }

        .paraEdit {
            width: 600px;
            height: 360px;
            /*margin-left: auto;
            margin-right:auto;*/
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: white;
            visibility: hidden;
            /*visibility: visible;*/
        }
    </style>

    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src="../js/config.js"></script>
    <script src="../js/site.js"></script>
    <script type="text/javascript">        
        function refreshParas(paraGroupId) {
            try {
                var prjId = Number(sessionStorage.getItem(constDefine.prjIdKey));
                var url = config.conf.baseUrl + "Para/projectID=" + prjId + "&paraGroupId=" + paraGroupId + "&pageSize=" + config.conf.projectPageSize + "&pageIndex=-1";
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: "GET",
                    url: url,
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    contentType: "application/json; charset=utf-8",
                    //dataType: "json",
                    success: function (data, status) {
                        clearTable("tbParas", true);
                        if (data.status != constDefine.DB_SUCESS) {
                            alert("查询参数列表失败,原因:" + data.reason);
                            return;
                        }

                        var tbModules = $("#tbParas");
                        for (var i = 0; i < data.value.length; i++) {
                            var paraItem = data.value[i];
                            var row = $('<tr id="tr_' + paraItem.id + '"></tr>');

                            var tdId = $("<td></td>");
                            tdId.append(i + 1);
                            row.append(tdId);

                            var tdparaGropuName = $('<td></td>');
                            tdparaGropuName.append(paraItem.group.name);
                            row.append(tdparaGropuName);

                            var tdparaKey = $('<td></td>');
                            tdparaKey.append(paraItem.key);
                            row.append(tdparaKey);

                            var tdparaName = $('<td id="td_' + paraItem.id + '_name"></td>');
                            tdparaName.append(paraItem.name);
                            row.append(tdparaName);

                            var tdparaGroupDes = $("<td></td>");
                            tdparaGroupDes.append(paraItem.des);
                            row.append(tdparaGroupDes);

                            var tdEdit = $("<td></td>");
                            var editHtml = '<input id="btnParaEdit' + paraItem.id + '" type="button" class="editButton" value="编辑" onclick="paraModify(' + paraItem.id + ')" />' +
                                '<input id="btnParaDelete' + paraItem.id + '" type="button" class="editButton" value="删除" onclick="paraDelete(' + paraItem.id + ')" />';
                            tdEdit.append(editHtml);
                            row.append(tdEdit);

                            tbModules.append(row);
                        }
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            }
            catch (ex) {
                alert(ex.error);
            }
        }

        function refreshParaGroup(groupEleId, flag, selectedValue) {
            try {
                var prjId = Number(sessionStorage.getItem(constDefine.prjIdKey));
                var url = config.conf.baseUrl + "ParaGroup/projectID=" + prjId + "&pageSize=" + config.conf.projectPageSize + "&pageIndex=-1";
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: "GET",
                    url: url,
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    contentType: "application/json; charset=utf-8",
                    //dataType: "json",
                    success: function (data, status) {
                        var comboxParaGroup = $("#" + groupEleId);
                        comboxParaGroup.empty();//清空

                        if (data.status != constDefine.DB_SUCESS) {
                            alert("查询参数分组列表失败,原因:" + data.reason);
                            return;
                        }

                        if (flag) {                            
                            comboxParaGroup.append('<option value="' + constDefine.paraGroupAll + '">全部</option>'); //为Select追加一个Option(下拉项)
                        }

                        for (var i = 0; i < data.value.length; i++) {
                            var paraGroupItem = data.value[i];
                            comboxParaGroup.append('<option value="' + paraGroupItem.id + '">' + paraGroupItem.name + '</option>'); //为Select追加一个Option(下拉项)
                        }

                        //comboxParaGroup.get(0).selectedIndex = selectedIndex;
                        if (selectedValue >= 0) {
                            comboxParaGroup.val(selectedValue);   // 设置Select的Value值为全部的项选中
                        }
                        //comboxParaGroup.find("option[value='" + constDefine.paraGroupAll + "']").attr("selected", true);
                        //comboxParaGroup.find("option").eq(3).prop("selected", true)
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            }
            catch (ex) {
                alert(ex.error);
            }
        }

        function paraModify(id) {
            try {
                var url = config.conf.baseUrl + "Para/id=" + id;
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: "GET",
                    url: url,
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    contentType: "application/json; charset=utf-8",
                    //dataType: "json",
                    success: function (data, status) {
                        if (data.status != constDefine.DB_SUCESS) {
                            alert("查询项目信息失败,原因:" + data.reason);
                            return;
                        }

                        $("#txtParaKey").val(data.value.key);
                        $("#txtParaName").val(data.value.name);
                        $("#txtParaDes").val(data.value.des);
                        refreshParaGroup("comboxParaGroupChoice", false, data.value.groupID);
                        sessionStorage.setItem(constDefine.paraIdKey, data.value.id);
                        showParaEdit();
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            }
            catch (ex) {
                alert(ex.error);
            }
        }

        function paraDelete(id) {
            try {
                var tdParaNameId = 'td_' + id + '_name';
                var paraName = $("#" + tdParaNameId)[0].innerText;

                if (!window.confirm('你确定要删除项目[' + paraName + ']吗？')) {
                    return;
                }

                var url = config.conf.baseUrl + "Para/id=" + id;
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: "DELETE",
                    url: url,
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    contentType: "application/json; charset=utf-8",
                    //dataType: "json",
                    success: function (data, status) {
                        if (data.status != constDefine.DB_SUCESS) {
                            alert("删除参数失败,原因:" + data.reason);
                            return;
                        }

                        var paraGroupId = Number(sessionStorage.getItem(constDefine.paraManagerSelectedGroupIdKey));
                        refreshParas(paraGroupId);
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            }
            catch (ex) {
                alert(ex.error);
            }
        }

        function showParaEdit() {
            $("#paraEdit").css("visibility", "visible");
            $("#paraEditShade").css("visibility", "visible");
        }

        function hidenParaEdit() {
            $("#paraEdit").css("visibility", "hidden");
            $("#paraEditShade").css("visibility", "hidden");
        }

        $(document).ready(function () {
            //为Select添加事件，当选择其中一项时触发
            $("#comboxParaGroup").change(function () {
                var paraGroupId = $("#comboxParaGroup").val(); //获取Select选择的Value
                sessionStorage.setItem(constDefine.paraManagerSelectedGroupIdKey, paraGroupId);
                refreshParas(paraGroupId);
            });

            refreshParaGroup("comboxParaGroup", true, -1);

            //这儿设置select第一项为选中项，但是打死都不触发选中项改变事件,就算是选中其它项也一样
            //所以只好在分组加载完成后手动查询第个分组对应的参数
            refreshParas(constDefine.paraGroupAll);

            $("#btnAddPara").click(function () {
                $("#txtParaKey").val("");
                $("#txtParaName").val("");
                $("#txtParaDes").val("");
                refreshParaGroup("comboxParaGroupChoice", false, -1);
                sessionStorage.setItem(constDefine.paraIdKey, '-1');
                showParaEdit();
            });

            $("#btnEditParaCancell").click(function () {
                hidenParaEdit();
            });

            $("#btnEditParaOk").click(function () {
                var paraKey = $("#txtParaKey").val();
                if (paraKey == null || paraKey == "") {
                    alert("Key不能为空");
                    return;
                }

                var paraName = $("#txtParaName").val();
                if (paraName == null || paraName == "") {
                    alert("参数名称不能为空");
                    return;
                }

                var paraDes = $("#txtParaDes").val();
                if (paraDes == null) {
                    paraDes = "";
                }

                var paraId = Number(sessionStorage.getItem(constDefine.paraIdKey));
                var type;
                //paraId<0为添加项目
                if (paraId < 0) {
                    type = "POST";
                }
                else {
                    type = "PUT";
                }

                var prjId = Number(sessionStorage.getItem(constDefine.prjIdKey));
                var groupId = $('#comboxParaGroupChoice').val()
                var url = config.conf.baseUrl + "Para";
                var data = '{"ID":' + paraId + ',"ProjectID":' + prjId + ',"GroupID":' + groupId + ',"Key":"' + paraKey + '","Name":"' + paraName + '","Des":"' + paraDes + '"}';
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: type,
                    url: url,
                    data: data,
                    contentType: "application/json; charset=utf-8",
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    //dataType: "json",
                    success: function (data, status) {
                        if (data.status != constDefine.DB_SUCESS) {
                            alert("提交参数信息失败,原因:" + data.reason);
                            return;
                        }

                        hidenParaEdit();
                        var paraGroupId = Number(sessionStorage.getItem(constDefine.paraManagerSelectedGroupIdKey));
                        refreshParas(paraGroupId);
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            });
        });

    </script>
</head>
<body class="contentBackgroundColor">
    <div class="divContent">
        <div>
            <span class="spanLabel_TextAlign_Right">参数分组</span>
            <span>
                <select id="comboxParaGroup" class="select">
                    <!--<option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="opel">Opel</option>
                    <option value="audi">Audi</option>-->
                </select>
            </span>
        </div>
        <!--<p style="text-align:center;font-size:40px;color:cadetblue;background-color:antiquewhite;margin-top:0px">分组列表</p>-->

        <table id="tbParas" class="table" style="margin-top:0px;">
            <tr>
                <th style="width:80px;">序号</th>
                <th style="width:200px;">组名称</th>
                <th style="width:270px;">Key</th>
                <th style="width:320px;">参数名称</th>
                <th style="width:300px;">参数描述</th>
                <th style="width:180px;">编辑</th>
            </tr>
        </table>

        <button id="btnAddPara" class="AddButton">添加参数</button>
    </div>

    <div id="paraEditShade" class="divContent paraEditShade">

    </div>

    <div id="paraEdit" class="paraEdit">
        <style type="text/css">
            div {
                margin-left: 20px;
                margin-top: 20px;
            }

            .inputPara {
                width: 330px;
            }
        </style>
        <p class="ptitle" style="margin-top:30px;">编辑分组信息</p>
        <div>
            <span class="spanLabel_TextAlign_Right">参数分组</span>
            <span>
                <select id="comboxParaGroupChoice" class="select"></select>
            </span>
        </div>

        <div>
            <span class="spanLabel_TextAlign_Right" style="margin-left:45px;">Key</span>
            <span><input type="text" class="inputPara inputText" id="txtParaKey" value="" /></span>
            <span class="spanLabel_Prompt">*参数Key</span>
        </div>

        <div>
            <span class="spanLabel_TextAlign_Right">参数名称</span>
            <span><input type="text" class="inputPara inputText" id="txtParaName" value="" /></span>
            <span class="spanLabel_Prompt">*参数名称</span>
        </div>

        <div>
            <span class="spanLabel_TextAlign_Right">参数描述</span>
            <span><input type="text" class="inputPara inputText" id="txtParaDes" value="" /></span>
            <span class="spanLabel_Prompt">*描述</span>
        </div>

        <div style="margin-left:233px">
            <span><button class="buttonOKCancell" id="btnEditParaOk">确定</button></span>
            <span><button class="buttonOKCancell" id="btnEditParaCancell">取消</button></span>
        </div>
    </div>
</body>
</html>
